<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
    <div id="app">
      <h2 ref="a">{{title}}</h2>
      <input type="text" v-model="title" id="txt" />
      <button @click="del()">点击</button>
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        title:"生命周期"
      },
      methods:{
        del(){
          // console.log(this)
          // 销毁当前实例的方法
          this.$destroy();
        }
      },
      beforeCreate(){
        // 创建loading
        console.log("实例创建之前")
      },
      created(){
        console.log("实例创建之后")
        // 使用vue提供的api获取页面元素
        // console.log(document.getElementById("txt"))
        // console.log(this.$refs.a)
        // 获取数据
        // ajax()
      },
      beforeMount(){
        console.log("挂载到页面之前")
        // 删除loading
      },
      mounted(){
        console.log(this.$refs.a)
        console.log("挂载到页面之后")
        // 获取数据
      },
      beforeUpdate(){
        console.log("数据更新之前")
      },
      updated(){
        console.log("数据更新之后")
      },
      beforeDestroy(){
        console.log("实例销毁之前")
      },
      destroyed(){
        console.log("实例销毁之后")
      }
    })
  </script>
</html>
